<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Account Profile</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<span th:fragment="applications">
        <script type="text/javascript">
            (() => document.addEventListener("DOMContentLoaded", () => $("#applicationsTable").DataTable()))();
        </script>


        <div class="profile-content w-100 mdc-data-table table-responsive"
             th:if="${authorizedServices}"
             style="display: none; border-width: 0px;"
             id="divApplications">

            <h2>
                <i class="mdi mdi-door-open fas fa-door-open" aria-hidden="true"></i>
                <span>Hello,
                    <span th:if="${authentication.principal.attributes['displayName'] != null}"
                          th:text="${authentication.principal.attributes['displayName'][0]}" />
                    <span th:if="${authentication.principal.attributes['displayName'] == null}"
                          th:text="${authentication.principal.id}"></span>
                </span>
            </h2>
            <div class="text-justify">
                <p th:utext="#{screen.account.applications}">Applications</p>
            </div>

            <table id="applicationsTable" class="mdc-data-table__table table table-striped noborder">
                <thead>
                <tr class="mdc-data-table__header-row">
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Service</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Description</th>
                </tr>
                </thead>
                <tbody class="mdc-data-table__content">

                <tr th:each="service : ${authorizedServices}" class="mdc-data-table__row">
                    <td class="mdc-data-table__cell">
                        <a th:id="${'service' + service.id}" th:title="${service.name}" th:utext="${service.name}"/>

                        <script th:inline="javascript">
                            /*<![CDATA[*/
                            serviceId = /*[[${service.serviceId}]]*/;
                            if (isValidURL(serviceId)) {
                                let id = /*[[${'service' + service.id}]]*/;
                                $(`a#${id}`).attr("href", serviceId);
                            }
                            /*]]>*/
                        </script>
                        <p>
                            <a target="_blank" rel="noopener noreferrer" th:if="${service.informationUrl}" th:href="${service.informationUrl}">Information URL</a>
                            <a target="_blank" rel="noopener noreferrer" th:if="${service.privacyUrl}" th:href="${service.privacyUrl}">Privacy URL</a>
                        </p>
                    </td>
                    <td class="mdc-data-table__cell">
                        <span th:utext="${service.description}" class="text-wrap"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>


    </span>
</body>

</html>
